<script lang="ts" setup>
    import {ref,reactive} from "vue"

    defineProps<{
        items:{title:string,content:string}[]
    }>()
</script>

<template>
    <div class="mycolor">
        <header>
            <slot name="header" :nums="items.length">
                <h1>默认标题{{ items.length }}</h1>
            </slot>
        </header>
        
                <ul>
                    <li v-for="(item,index) in items" :key="index">
                        <slot :it="item" :index="index">{{ item.title }}</slot>
                    </li>
                </ul>
            
        <footer>
            <slot name="footer">
                <h4>底部默认信息</h4>
            </slot>
        </footer>
    </div>
   
   
</template>
<style scoped>
.mycolor{
    background-color: red;
}
</style>